<template>
        <div class="cell-item">
            <div class="cell-header van-hairline--bottom">
                订单号：{{item.orderno}}
                <div class="order-status">
                    {{item.status|stateLabel}}
                </div>
            </div>
            <div class="cell-content van-hairline--bottom">
                <hl-field :show-bottom-border="false" :margin="false" :value="item.senderaddress">
                </hl-field>
                <hl-field :show-bottom-border="false" :margin="false" :red="true" :value="item.receiveraddress">
                </hl-field>
                <hl-field :show-bottom-border="false" :margin="false" placeholder="" :value="`${item.receivername}-${item.receiverphone} 收`">
                    <i class="iconfont icon-phoneBook" style="font-size: 18px;" slot="prefix"></i>
                </hl-field>
                <hl-field :show-bottom-border="false" :margin="false" placeholder="" :value="`下单时间：${item.createtime}`">
                    <i class="iconfont icon-shijian" style="font-size: 18px;" slot="prefix"></i>
                </hl-field>
            </div>
            <div class="cell-action" v-if="item.state == 4">
                <button class="btn-primary">确定签收</button>
            </div>
        </div>
</template>

<script>
    import HlField from "./HlField";
    export default {
        name: "ExpressOrderCell",
        components: {HlField},
        data() {
            return {}
        },
        props: {
            item: {
                default() {
                    return {
                        orderNo:"",
                        createtime:'',
                        state:1,
                        senderAddress: "",
                        receiverAddress: "",
                        receiverphone:'',
                        receivername:"",

                    }
                }
            }
        },


        filters:{
            stateLabel(value){
                switch (value) {
                    case -1:
                        return "已取消";
                    case 0:
                        return "待支付";
                    case 1:
                        return "待接单";
                    case 2:
                        return "待取货";
                    case 3:
                        return "已取货";
                    case 4:
                        return "已送达";
                    case 5:
                        return "已签收";
                    default:
                        return "";
                }
            }
        },
        methods: {}
    }
</script>

<style scoped lang="less">

        .cell-item {
            min-height: 80px;
            background: #fff;
            margin-top: 12px;
            margin-left: 12px;
            margin-right: 12px;
            border-radius: 3px;
            &:active {
                background: darken(#fff,5%);
            }
            &:last-child {
                margin-bottom: 12px;
            }
            .cell-header {
                padding:12px;
                font-size: 14px;
                color: #444;
                display: flex;
                flex-direction: row;
                .order-status {
                    margin-left: auto;
                    color: #25a3ff;
                }
            }
            .cell-content {
                margin-bottom: 8px;
            }
            .cell-action {
                padding: 16px;
            }
        }

</style>